<style lang="scss" scoped>
    .student_lesson_details{
        min-height: calc(100vh - 90px);
        background-color: #FAFCFC;
        background-image:url('~@/assets/student-bg.jpg');
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-size: 100%;
        position: relative;
        .go_center{
            position: absolute;
            right: 10px;
            top: 20px;
        }
    }

 
    .step li{
        color: #fff;
        background:$sub-color;
        width:24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        &.success{
            background:$success-color;
        }
        &.error{
            background:$error-color;
        }
        &.skip{
            background:$warning-color;
        }
        &.active::after{
            position: absolute;
            content: "";
            width: 16px;
            height: 16px;
            background: url('~@/assets/current.png') no-repeat;
            background-size: contain;
            bottom: -14px;
            left: 0;right: 0;
            margin: auto;
        }
    }
    .step .tips{
        color: #999;
        font-size: 12px;
        li{
            width: 8px;
            height: 8px;
            margin-right: 3px;
            line-height: 26px;
        }
    }
    .t1_tips{
        position: relative;
        &::after{
            content: '';
            width: 16px;
            height: 16px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: cover;
            position: absolute;
            bottom: -24px;
            left: 0;right: 0;
            margin: auto;
        }
    }
    .t2_tips{
        position: relative;
        &::after{
            content: attr(answer);
            position: absolute;
            bottom: -24px;
            left: -20px;
            padding-left: 20px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: 16px 16px;
        }
    }
    .t3_tips{
        position: relative;
        &::after{
            content: '';
            width: 16px;
            height: 16px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: cover;
            position: absolute;
            top:0;bottom: 0;
            left: -24px;
            margin: auto;
        }
    }
</style>
<template>
    <div class="student_lesson_details">
        <div class="questions-list" v-if="questions_list.length">
            <div class="d-flex line-height-26">
                <h4 class="block-title t1 mr-1">No.{{currentIndex+1+' '+currentProblems.typeName}}题 ({{currentProblems.score}}分)</h4>
                <span class="color-666 mr-2">题目编号：{{currentProblems.no}}</span>
            </div>
            <div class="t1" v-if="currentProblems.type===1">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup v-model="currentAnswer" >
                        <Radio :class="{t1_tips:'1'==originAnswer}" :disabled="true" border label="1">正确</Radio>
                        <Radio :class="{t1_tips:'2'==originAnswer}" :disabled="true" border label="2">错误</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div class="t2" v-if="currentProblems.type===2">
                <div class="details p-1">
                    <div class="my-2">
                        <span v-for="(val,index) in currentProblems.title" :key="index">
                            {{val}}
                            <Input :answer="originAnswer[index]" :disabled="true" class="w-100 mx-1 t2_tips" v-model="currentAnswer[index]" v-if="index!==currentProblems.title.length-1"></Input>
                        </span>
                    </div>
                </div>
            </div>
            <div class="t3" v-if="currentProblems.type===3">
                <div class="details p-1 pl-3">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup vertical v-if="currentProblems.typeName==='单选'" v-model="currentAnswer">
                        <Radio :class="{t3_tips:val.index==originAnswer}" :disabled="true" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                    </RadioGroup>
                    <CheckboxGroup v-else v-model="currentAnswer" >
                        <Checkbox :class="{t3_tips:originAnswer.includes(val.index)}" :disabled="true" class="d-block mb-1" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.text}}</Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
            <div class="t4" v-if="currentProblems.type===4">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <p class="my-2">
                        得分关键词：<span class="mr-2">{{originAnswer}}</span>
                        本题得分：<b class="color-t3">{{currentProblems.answer.score}}分</b>
                    </p>
                    <Input type="textarea" style="width:700px" :disabled="true" v-model="currentAnswer" :autosize="{minRows: 5}" placeholder="请输入答题内容" />
                </div>
            </div>
           
            <div class="my-2 p-1" v-if="currentProblems.file_list.length">
                <span class="mr-1">附件列表:</span>
                <download-list :file_list="currentProblems.file_list"/>
            </div>

            <div class="my-2 ml-1">
                <Button type="primary" @click="next_problems()">下一题</Button>
            </div>
            <div class="step mt-2 p-1">
                <ul class="d-flex">
                    <li class="mr-2" @click="next_problems(index)" v-for="(val,index) in this.questions_list" :key="index" :class="[{active:index===currentIndex},['skip','error','success',''][val.answer.right+1]]" >{{index+1}}</li>
                </ul>
            </div>
            <p class="pl-1 line-height-26 font-12 color-999">点击序号跳转至指定题目</p>
            <div class="step px-1">
                <ul class="d-flex tips">
                    <div class="mr-1">
                        <li class="success"></li>表示正确
                    </div>
                    <div class="mr-1">
                        <li class="error"></li>表示错误
                    </div>
                    <!-- <div class="mr-1">
                        <li class="skip"></li>表示跳过
                    </div> -->
                </ul>
            </div>
        </div>
            
    </div>
</template>

<script>
import {lesson_student_answer} from '@/common/tapi'
import {deep_clone} from "@/common/tool"
export default {
    data(){
        return{
            sid:0,
            lid:0,
            questions_list:[],
            currentIndex:-1,
            currentProblems:{
                type:1,
                typeName:''
            },
            typeNames:["判断",'填空/计算','选择','论述'],
            currentAnswer:null,
            originAnswer:null
        }
    },
    methods:{
        process(val){
            val.typeName=this.typeNames[val.type-1]
            if(val.type===2)
                val.title=val.title.split('(####)')
            if(val.type===3){
                val.typeName=val.origin_answer.includes(',')?'多选':'单选'
            }
            this.currentProblems=val
        },
        next_problems(index=-1){
            if(~index && index<this.questions_list.length){
                this.currentIndex=index
            }
            else if(index===-1 && this.currentIndex<this.questions_list.length-1){
                this.currentIndex++
            }else{
                this.$Modal.info({
                    title: '提示',
                    content: '已经是最后一题了'
                });
                return
            }
            this.process(deep_clone(this.questions_list[this.currentIndex]))
        },
        go_center(){
            this.$Modal.confirm({
                title: '确认',
                content: `确认返回个人中心？`,
                onOk: () => {
                    this.$router.push('center')
                }
            });
        }
    },
    watch:{
        currentIndex(){
            const type=this.currentProblems.type
            if(type===1){
                this.currentAnswer=this.currentProblems.answer.content
                this.originAnswer=this.currentProblems.origin_answer
            }
            else if(type===2){
                this.currentAnswer=this.currentProblems.answer.content.split(',')
                this.originAnswer=this.currentProblems.origin_answer.split(',')
            }
            else if(type===3){
                if(this.currentProblems.typeName==='单选'){
                    this.currentAnswer=this.currentProblems.answer.content
                    this.originAnswer=this.currentProblems.origin_answer
                }
                else{
                    this.currentAnswer=this.currentProblems.answer.content.split(',')
                    this.originAnswer=this.currentProblems.origin_answer.split(',')
                }
            }
            else{
                this.originAnswer=this.currentProblems.origin_answer
                this.currentAnswer=this.currentProblems.answer.content
            }
        }
    },
    created(){
        this.sid=this.$route.query.sid
        this.lid=this.$route.query.lid
        lesson_student_answer({sid:this.$route.query.sid,lid:this.$route.query.lid})
        .then(res=>{
            if(res){
                this.questions_list=res.data.question
                this.next_problems()
            }
        })
    }
}
</script>